<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>投诉弹出框</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="css/sm.css">
	<link rel="stylesheet" href="css/sm-extend.min.css">
	<link href="css/animate-animo.css" rel="stylesheet" type="text/css">
	<style type="text/css">
      #menu-icon {
      	float: left;
      }
      h1 {
      	color: #ff0
      }
      .icon {
      	color:#fff;
      }
      .row .col-50 {
      	width: 50%;
      	margin-left: 0px;
      }
      .grid-img {
      	background: #fff;
      	margin: 0px;
      	padding-top: 20px;
      	padding-bottom: 20px;
      	text-align: center;
      }
      .complain-card {
      	margin: 20px;
      	padding-top: 20px;
      	/*background: #000;*/
      	border-radius: 5px;
      	padding-bottom: 20px;
      }
      .popup.modal-in,
	  .login-screen.modal-in {
  		  -webkit-transform: translate3d(0, 50%, 0);
          transform: translate3d(0, 50%, 0);
	  }
    </style>
	<script type='text/javascript' src='js/jquery-2.2.0.min.js' charset='utf-8'></script>
	<script src="js/demo.js"></script>
	<script src="js/animo.js"></script>
	<script src='js/zepto.min.js'></script>
	<script src='js/sm.js'></script>
	<script src='js/sm-extend.js'></script>

</head>
<body>

<div class="page-group">
	<!-- 你的html代码 -->
	<div class="page">
		<div class="complain-card open-about">
			<div class="list-block ">
				<ul>
					<!-- Text inputs -->
					<li>
						<div class="item-content">
							<div class="item-media"> <i class="icon icon-form-name"></i>
							</div>
							<div class="item-inner">
								<div class="item-title label">姓名</div>
								<div class="item-input">
									<input type="text" placeholder="Your name"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="item-content">
							<div class="item-media"> <i class="icon icon-form-email"></i>
							</div>
							<div class="item-inner">
								<div class="item-title label">邮箱</div>
								<div class="item-input">
									<input type="email" placeholder="E-mail"></div>
							</div>
						</div>
					</li>
					<li class="align-top">
						<div class="item-content">
							<div class="item-media">
								<i class="icon icon-form-comment"></i>
							</div>
							<div class="item-inner">
								<div class="item-title label">文本域</div>
								<div class="item-input">
									<textarea></textarea>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<!-- About Popup -->
		<div class="popup popup-about">
			<div class="content-block">
				<p>About</p>
				<p>
					<a href="#" class="close-popup">Close popup</a>
				</p>
				<p>Lorem ipsum dolor ...</p>
			</div>
		</div>
	</div>

</div>

<script>

		Zepto.init();
		//ready
		Zepto(function($){
  			//alert('Ready to Zepto!')
  			$('.complain-card').click(function(){
  				//alert("hello")
  				//jQuery('.complain-card').animo( { animation: 'tada' } );
  				//jQuery.hello();
  				$.popup(".popup-about")
			})
		})
		// jQuery.hello();
	</script>
</body>
</html>